<template>
    <p>个人设置页</p>
    <div>
        修改手机号: <input type="text" v-model="phone" placeholder="请输入新手机号">
    </div>
    <div>
        <button @click="updateUserInfo">修改手机号</button>
    </div>
</template>


<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            phone:''
        }
    },
    computed:{
        ...mapState(['userInfo'])
    },
    methods:{
        updateUserInfo(){
            // 合并数据
            const newUserInfo = {...this.userInfo, phone: this.phone}
            this.$store.commit('updateUserInfo', newUserInfo)
            alert('修改成功')
            this.$router.push({path:'/user'})
        }
    }
}

</script>